<template>
  <q-card type="a"
          class="app-card cursor-pointer"
          style="width: auto;"
          @contextmenu.stop
          v-ripple @click.stop="openLink(data, {module: 'wkb', page: 'main', element: 'app-icon', event: 'click'})"
  >
    <q-badge v-if="clickBadge && data.clickCount" color="grey" floating transparent>
      {{ data.clickCount }}
    </q-badge>
    <q-card-section class="full-height" horizontal>
      <div style="padding: 21px">
        <q-avatar v-if="data.appData.icon"
                  rounded
                  text-color="white"
                  style="font-size: 64px"
                  :style="{background:data.appData.background}"
        >
          <img draggable="false" :src="data.appData.icon" alt="">
        </q-avatar>
        <q-avatar v-else rounded text-color="white" style="border-radius: 4px;font-size: 64px"
                  :color="['primary','secondary','amber','green','red'][data.appData.name[0].charCodeAt(0)%5]"
        >{{ data.appData.name[0] }}
        </q-avatar>
      </div>
      <q-separator vertical/>
      <div class="q-px-sm q-py-md" style="height: 100%;width: calc(100% - 96px)">
        <div class="ellipsis text-subtitle2"
        >{{ data.appData.name }}
          <q-icon v-if="data.type === 1" name="bookmark" color="red" text-color="white"/>
        </div>
        <p class="ellipsis-2-lines text-weight-light"
           style="font-size: 0.8em;height: 32px;width: calc(100% - 16px)">{{ data.appData.description }}</p>
      </div>
    </q-card-section>
    <q-popup-proxy v-model="showPopupMenu" context-menu>
      <q-list style="min-width: 100px">
        <q-item clickable v-close-popup @click.stop="editApp" v-if="showEdit">
          <q-item-section>编辑应用</q-item-section>
        </q-item>
        <q-separator/>
        <q-item clickable v-close-popup @click.stop="removeApp">
          <q-item-section>删除应用</q-item-section>
        </q-item>
        <q-separator/>
        <q-item clickable v-close-popup @click.stop="moveOut" v-if="showMoveOut">
          <q-item-section>移出分组</q-item-section>
        </q-item>
      </q-list>
    </q-popup-proxy>
  </q-card>
</template>

<script>
import AppActivityMixin from '../../../mixins/app-activity'
import AppCardBase from '../../../mixins/app-card-base'

export default {
  name: 'AppSmallCard',
  mixins: [AppCardBase, AppActivityMixin],
  props: {
    clickBadge: Boolean
  },
  mounted () {
    // ...
  }
}
</script>

<style lang="scss">

.app-card {
  transition: all .3s;
  border-radius: 2px;
}

</style>
